<div>
    <el-form >
        <el-form-item label="" v-if="enterOpen"></el-form-item>
        <el-row type="flex" justify="end" v-if="!enterOpen" >
            <el-col :span="1">
                <el-form-item label="" style="margin-bottom: 7px;margin-top:4px;">
                    <el-button  type="primary"  @click="openEnter(false)">返回</el-button>
                </el-form-item>
            </el-col>
        </el-row>

    </el-form>
    <!--<input type="checkbox" id="panel-activer">-->
    <div class="panel-parent">
        <div class="side-panel">
            <div>

            </div>
        </div>
        <div class="self">
            <el-form :inline="true" ref="form" :model="form" label-position="top" label-width="80px">
                <el-form-item label=""  prop="flightInfo.flightInfoId":rules
                        ="[ {required: false, message: '航班号不能为空'}]">
                    <el-select clearable  v-model="form.flightInfo.flightInfoId" filterable placeholder="航班号"   >
                        <el-option
                                v-for="plane in planes"
                                :key="plane.flightInfoId"
                                :label="plane.flightNum"
                                :value="plane.flightInfoId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" >
                    <el-date-picker
                            v-model="form.startDate"
                            type="date"
                            placeholder="预约日期"
                            format="yyyy-MM-dd"
                            @change="pickStartDate"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" >
                    <el-date-picker
                            v-model="form.endDate"
                            type="date"
                            placeholder="预计安排日期"
                            format="yyyy-MM-dd"
                            @change="pickEndDate"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label=""  class = "transparent">
                    <el-button type="primary" @click="queryAppointment">查询</el-button>
                </el-form-item>
        </el-form>
            <el-row >
                <!--style="display: flex; flex-wrap: wrap;"-->
                <el-col :span="24" >

                    <template>
                        <!--<el-carousel :interval="4000" type="card" height="300px" indicator-position="none">-->
                            <!--<el-carousel-item v-for="appo in tableData" :key="appo.appoId">-->
                        <div style="display: flex; flex-wrap: wrap;max-height:280px;overflow-y:hidden ">
                                <el-card  v-for="appo in tableData" :key="appo.appoId" style="width:240px;margin:5px"  >
                                    <div style="margin-bottom: 10px;">
                                        <img src="/dam/image/flight1.png" style="">
                                    </div>

                                    <div style="font-size: 13px;">
                                        <el-row>
                                            <el-col :span="8">预约单位:</el-col>
                                            <el-col :span="12">{{appo.appoUnit}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">预约时间:</el-col>
                                            <el-col :span="12">{{appo.appoDate}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">预起:</el-col>
                                            <el-col :span="12">{{appo.flightPlane&&appo.flightPlane.takeOffTime?appo.flightPlane.takeOffTime.substr(11,5):""}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">出发地:</el-col>
                                            <el-col :span="7">{{appo.originating}} </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">目的地:</el-col>
                                            <el-col :span="12">{{appo.destination}}</el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="7">进出港:</el-col>
                                            <el-col :span="12">{{appo.appProperty}}</el-col>
                                        </el-row>
                                    </div>
                                </el-card>
                        </div>
                            <!--</el-carousel-item>-->
                        <!--</el-carousel>-->
                    </template>

                </el-col>
            </el-row>
            <el-row  type="flex" justify="space-around">
                <el-col :span="12" style="margin-right: 5px">
                    <kf-table :url="urls.url"  border  :page-size="10" ref="table" stripe height="380" >
                        <el-table-column  header-align="center" label="进港">
                            <el-table-column  type="expand" >
                                <template scope="scope">
                                <el-form label-position="left" inline class="thin-item">
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="预约单位：">
                                                <span>{{ scope.row.appoUnit }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="预约人：">
                                                <span>{{ scope.row.appoName }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="联络人电话：">
                                                <span>{{ scope.row.appoPhoneNum }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="预约时间：">
                                                <span>{{ scope.row.appoDate }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="航班号：">
                                                <span>{{ scope.row.flightInfo.flightNum }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="出发地：">
                                                <span>{{ scope.row.originating }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="8">
                                            <el-form-item label="预落：">
                                                <span>{{scope.row.flightPlane&&scope.row.flightPlane.arriveTime?scope.row.flightPlane.arriveTime.substr(11,5):""}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <!--<el-col :span="8">-->
                                            <!--<el-form-item label="预落：">-->
                                                <!--<span> {{scope.row.flightPlane&&scope.row.flightPlane.preArriveTime?scope.row.flightPlane.preArriveTime.substr(11,5):""}}</span>-->
                                            <!--</el-form-item>-->
                                        <!--</el-col>-->
                                    </el-row>
                                </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column prop="appoUnit"  label="预约单位" min-width="110">
                            </el-table-column>
                            <el-table-column  prop="appoDate" label="预约时间" width="101px" >
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="90px">
                            </el-table-column>
                            <el-table-column  prop="originating" label="出发地" min-width="114px">
                            </el-table-column>
                            <el-table-column  label="预落" width="70px">
                                <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.arriveTime?scope.row.flightPlane.arriveTime.substr(11,5):""}}
                                </span>
                                </template>
                            </el-table-column>

                            <!--<el-table-column  label="预落" width="70px">-->
                                <!--<template scope="scope">-->
                                <!--<span>-->
                                    <!--{{scope.row.flightPlane&&scope.row.flightPlane.preArriveTime?scope.row.flightPlane.preArriveTime.substr(11,5):""}}-->
                                <!--</span>-->
                                <!--</template>-->
                            <!--</el-table-column>-->

                        </el-table-column>
                        <el-table-column label="操作" fixed="right"  width="100px" >
                            <template scope="scope"  >
                                <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                <el-button  type="text" @click="editAppointment(scope)" style="margin-right: -10px;">修改</el-button>
                            </template>
                        </el-table-column>

                </kf-table>
                </el-col>

                <el-col :span="12" style="margin-left: 5px">
                    <kf-table :url="urls.url2"   :page-size="20" ref="table2" stripe  border height="380" >
                        <el-table-column prop="appoUnit"  header-align="center" label="出港">
                            <el-table-column  type="expand" >
                                <template scope="scope">
                                    <el-form label-position="left" inline class="thin-item">
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="预约单位：">
                                                    <span>{{ scope.row.appoUnit }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="预约人：">
                                                    <span>{{ scope.row.appoName }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="联络人电话：">
                                                    <span>{{ scope.row.appoPhoneNum }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="预约时间：">
                                                    <span>{{ scope.row.appoDate }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="航班号：">
                                                    <span>{{ scope.row.flightInfo.flightNum }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item label="出发地：">
                                                    <span>{{ scope.row.originating }}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="预起：">
                                                    <span>{{scope.row.flightPlane&&scope.row.flightPlane.takeOffTime?scope.row.flightPlane.takeOffTime.substr(11,5):""}}</span>
                                                </el-form-item>
                                            </el-col>
                                            <!--<el-col :span="8">-->
                                                <!--<el-form-item label="预起：">-->
                                                    <!--<span> {{scope.row.flightPlane&&scope.row.flightPlane.preFlyTime?scope.row.flightPlane.preFlyTime.substr(11,5):""}}</span>-->
                                                <!--</el-form-item>-->
                                            <!--</el-col>-->
                                        </el-row>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column prop="appoUnit"  label="预约单位" min-width="110">
                            </el-table-column>
                            <el-table-column  prop="appoDate" label="预约时间" width="101px" >
                            </el-table-column>
                            <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="90px">
                            </el-table-column>
                            <el-table-column prop="destination" label="目的地" min-width="114px">
                            </el-table-column>
                            <el-table-column  label="预起" >
                                <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.takeOffTime?scope.row.flightPlane.takeOffTime.substr(11,5):""}}
                                </span>
                                </template>
                            </el-table-column>

                            <!--<el-table-column label="预起">-->
                                <!--<template scope="scope">-->
                                <!--<span>-->
                                    <!--{{scope.row.flightPlane&&scope.row.flightPlane.preFlyTime?scope.row.flightPlane.preFlyTime.substr(11,5):""}}-->
                                <!--</span>-->
                                <!--</template>-->
                            <!--</el-table-column>-->

                        </el-table-column>
                        <el-table-column label="操作" fixed="right"  width="100px" >
                            <template scope="scope"  >
                                <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="editAppointment(scope)" style="margin-right: -10px;">修改</el-button>-->
                                <el-button  type="text" @click="editAppointment(scope)" style="margin-right: -10px;">修改</el-button>
                            </template>
                        </el-table-column>
                    </kf-table>
                </el-col>
            </el-row>
            <el-dialog
                    title="预约航班计划修改"
                    :visible.sync="flightPlaneEdit"
                    ref="flightPlaneEdit"
                    >
                <enters :parentData="enterData" ref="enters"></enters>
             </el-dialog>
            <el-dialog
                    title="预约航班计划修改"
                    :visible.sync="appointmentEdit"
                    :width="diawidth"
            >
                <!--<enters  v-if="appointment.flightPlane"  :parentData="enterData" ref="enters"></enters>-->
                <el-form :inline="true" :model="appointment" class="regular-form" ref="appointment" label-width="100px">
                    <el-form-item label="航班号"  prop="flightInfo.flightInfoId":rules
                            ="[ {required: true, message: '航班号不能为空'}]">
                        <el-select v-model="appointment.flightInfo.flightInfoId" filterable placeholder="请选择" @change="handleSelect" >
                            <el-option
                                    v-for="plane in planes"
                                    :key="plane.flightInfoId"
                                    :label="plane.flightNum"
                                    :value="plane.flightInfoId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机型" >
                        <el-input v-model="flightInfo.flightType" placeholder="机型" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="机号" >
                        <el-input v-model="flightInfo.flightNo" placeholder="机型" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="性质" prop="planeProperty":rules
                            ="[ {required: false, message: '航班性质不能为空'}]" >
                        <el-select v-model="appointment.planeProperty" filterable placeholder="航班性质"  disabled="true">
                            <el-option label="预约" value="预约">
                            </el-option>
                            <el-option label="内部安排" value="内部安排">
                            </el-option>
                            <el-option  label="批文" value="批文">
                            </el-option>
                            <el-option label="临时" value="临时">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约日期"  prop="appoDate":rules
                            ="[ {required: true, message: '预约日期不能为空'}]">
                        <el-date-picker
                                v-model="appointment.appoDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                @change="pickExpectDate"

                        >
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item label="预计安排时间"  prop="estimatedTime":rules
                            ="[ {required: false, message: '预约日期不能为空'}]">
                        <el-date-picker
                                v-model="appointment.estimatedTime"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                @change="pickEstimatedTime"

                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="起始地" prop="originating":rules
                            ="[ {required: true, message: '起始地不能为空'},{max:30,message:'长度不能超过30位'}]">
                        <el-autocomplete
                                class="inline-input"
                                v-model="appointment.originating"
                                :fetch-suggestions="querySearchPlace"
                                placeholder="请输入内容"
                                :disabled="true"
                        >
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="目的地" prop="destination":rules
                            ="[ {required: true, message: '目的地地不能为空'},{max:30,message:'长度不能超过30位'}]">
                        <el-autocomplete
                                class="inline-input"
                                v-model="appointment.destination"
                                :fetch-suggestions="querySearchPlace"
                                placeholder="请输入内容"
                                :disabled="true"
                        >
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="预约单位" >
                        <el-input v-model="appointment.appoUnit" placeholder="预约单位" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="预约人" >
                        <el-input v-model="appointment.appoName" placeholder="预约人" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button  type="primary"  @click="confirmEditAppointment">    修改    </el-button>
                        <el-button v-if="!appointment.flightPlane" type="primary"  @click="transformToFlightPlane(currentAppointmentScope)">生成计划</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>

</div>


